.select-container {
  @apply text-left relative h-10;

  .select-title {
    @apply bg-bg25 text-white-80 w-full flex items-center justify-between h-full rounded cursor-pointer px-5;
    border: 1px solid rgba(255, 255, 255, 0.4);

    .select-title-text {
      @apply flex-1 text-sm;
    }

    .select-title-arrow {
      @apply w-5 h-5;
      transition: all 0.3s;

      &.activeEnter {
        transform: rotate(180deg);
      }

      &.activeLeave {
        transform: rotate(0deg);
      }
    }
  }

  .select-options {
    @apply bg-bg25 absolute left-0 right-0 z-4 rounded;
    top: 3.125rem;
    font-weight: 400;
    max-height: 12.5rem;

    &.unactive {
      z-index: 0 !important;
    }

    .select-items-box {
      @apply overflow-x-hidden overflow-y-auto bg-bg25;
      transition: all 0.3s;
      box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);

      &::-webkit-scrollbar {
        width: 0.25rem;
      }

      &::-webkit-scrollbar-corner,
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #313131;
      }

      .select-items {
        @apply rounded list-none;
        width: calc(100% - 0.875rem);
        margin-left: 0.625rem;

        .select-item {
          @apply px-5 h-10 leading-10 text-white text-sm cursor-pointer;

          &.active {
            background: #313131;
          }

          &:hover {
            transition: all 0.3s;
            background: #313131;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .select-container {
    @apply h-8 text-sm;

    .select-title {
      @apply px-3;

      .select-title-arrow {
        @apply w-4 h-4;
      }
    }
  }
}
